<template>
	<view :style="{'padding-top':statusBarHeight + 'px'}">
		<view class="welcome" :style="{'top':statusBarHeight + 'px'}">
			欢迎您！ *泰
		</view>
		<image class="topImage" src="../../static/icons/homeIcon/banner3.jpg"></image>
		<view class="wrap">
			<view class="wrap-title">房产查询</view>
			<view class="navigate-item" v-for="(item, index) in list" :key="index" @click="gonavigate(item)">
				<image class="navigate-logo" :src="item.logo"></image>
				<text class="navigate-text">{{item.name}}</text>
				<text class="navigate-icon uni-icon">&#xe470;</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				// 顶部安全距离
				statusBarHeight: 0,
				// 底部安全距离
				safeAreaInsets: 0,
				list: [{
						name: '查询本人',
						logo: '../../static/icons/handleIcon/1.png',
						jumpUrl: '/pages/homeNotice/index'
					},
					{
						name: '查询未成年人',
						logo: '../../static/icons/handleIcon/2.jpg',
						jumpUrl: '/pages/homeNotice/index'
					},
					{
						name: '查询商品房电子合同',
						logo: '../../static/icons/handleIcon/3.png',
						jumpUrl: '/pages/homeNotice/index'
					},
					{
						name: '我的房查结果',
						logo: '../../static/icons/handleIcon/4.jpg',
						jumpUrl: '/pages/homeNotice/index'
					},
					{
						name: '我的疑问申请记录',
						logo: '../../static/icons/handleIcon/5.jpg',
						jumpUrl: '/pages/homeNotice/index'
					},
					{
						name: '操作指引',
						logo: '../../static/icons/handleIcon/6.jpg',
						jumpUrl: '/pages/homeNotice/index'
					}
				]
			};
		},
		methods: {
			...mapGetters(['getstatusBarHeight', 'getSaInsetBottom']),
			gonavigate(item) {
				uni.navigateTo({
					url: item.jumpUrl
				})
			}
		},
		mounted() {
			this.statusBarHeight = this.getstatusBarHeight();
			this.safeAreaInsets = this.getSaInsetBottom();
		}
	};
</script>

<style>
	.topImage {
		width: 100%;
		height: 350rpx;
		display: block;
	}

	.welcome {
		position: fixed;
		left: 40rpx;
		top: 40rpx;
		z-index: 20;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding: 15rpx 20rpx;
		border-radius: 20rpx;
	}

	.wrap {
		padding: 0;
	}

	.wrap-title {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		background: #F0F0F0;
		color: #777777;
		font-size: 34rpx;
		padding-left: 24rpx;
	}

	.navigate-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		border-top-style: solid;
		border-top-color: #f0f0f0;
		border-top-width: 1px;
		padding: 12px;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.navigate-item:active {
		background-color: #f8f8f8;
	}

	.navigate-text {
		flex: 1;
		color: #000000;
		font-size: 14px;
		font-weight: normal;
		
	}

	.navigate-icon {
		margin-left: 15px;
		color: #999999;
		font-size: 14px;
		font-weight: normal;
	}

	.navigate-logo {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}
</style>